<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const phoneNumber = ref('')
const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const answer1 = ref('')
const answer2 = ref('')

// 安全问题相关数据
const question1Type = ref('preset') // 'preset' 或 'custom'
const question2Type = ref('preset')
const customQuestion1 = ref('')
const customQuestion2 = ref('')
const selectedQuestion1 = ref(0) // 预设问题索引
const selectedQuestion2 = ref(1)

// 密码显示状态
const showPassword = ref(false)
const showConfirmPassword = ref(false)

// 步骤控制
const currentStep = ref(1)
const totalSteps = 3

// 验证状态
const phoneError = ref('')
const passwordError = ref('')
const confirmPasswordError = ref('')

// 加载状态
const loading = ref(false)

// 步骤标题
const stepTitles = [
  '基本信息',
  '密码设置',
  '安全问题'
]

// 步骤描述
const stepDescriptions = [
  '请输入您的手机号和用户名',
  '请设置您的登录密码',
  '请设置安全问题用于找回密码'
]

// 安全问题列表
const securityQuestions = [
  '您出生于哪个城市?',
  '您母亲的姓氏是什么?',
  '您第一所学校的名称?',
  '您最喜欢的书籍?',
  '您童年时的昵称?'
]

// 检查手机号是否已存在
const checkPhoneExists = async (phone: string): Promise<boolean> => {
  try {
    const response = await fetch(`/api/users/selByPhone?phone=${encodeURIComponent(phone)}`)
    const result = await response.json()
    console.log(result)
    return result.code === ResponseMsg.DATA_ERROR // 如果code是DATA_ERROR，表示手机号已存在
  } catch (error) {
    console.error('检查手机号失败:', error)
    return true // 发生错误时默认认为存在，防止重复注册
  }
}

// 检查用户名是否已存在
const checkUsernameExists = async (username: string): Promise<boolean> => {
  try {
    const response = await fetch(`/api/users/selByNickname?nickname=${encodeURIComponent(username)}`)
    const result = await response.json()
    return result.code === ResponseMsg.DATA_ERROR // 如果code是DATA_ERROR，表示用户名已存在
  } catch (error) {
    console.error('检查用户名失败:', error)
    return true // 发生错误时默认认为存在，防止重复注册
  }
}

// 手机号验证
const validatePhone = async () => {
  const phone = phoneNumber.value.trim()
  const phoneRegex = /^1[3-9]\d{9}$/

  if (!phone) {
    phoneError.value = '请输入手机号'
    return false
  }

  if (!phoneRegex.test(phone)) {
    phoneError.value = '请输入正确的手机号格式'
    return false
  }

  // 检查手机号是否已存在
  const exists = await checkPhoneExists(phone)
  if (exists) {
    phoneError.value = '该手机号已被注册'
    return false
  }

  phoneError.value = ''
  return true
}

// 用户名验证
const validateUsername = async () => {
  const name = username.value.trim()

  if (!name) {
    return false
  }

  if (name.length < 2 || name.length > 20) {
    return false
  }

  // 检查用户名是否已存在
  const exists = await checkUsernameExists(name)
  if (exists) {
    return false
  }

  return true
}

// 密码强度验证
const validatePassword = () => {
  const pwd = password.value

  if (!pwd) {
    passwordError.value = '请输入密码'
    return false
  }

  if (pwd.length < 8 || pwd.length > 20) {
    passwordError.value = '密码长度需为8-20个字符'
    return false
  }

  const hasUpperCase = /[A-Z]/.test(pwd)
  const hasLowerCase = /[a-z]/.test(pwd)
  const hasNumber = /[0-9]/.test(pwd)

  if (!hasUpperCase || !hasLowerCase || !hasNumber) {
    passwordError.value = '密码需包含至少1个大写字母、1个小写字母和1个数字'
    return false
  }

  passwordError.value = ''
  return true
}

// 确认密码验证
const validateConfirmPassword = () => {
  if (!confirmPassword.value) {
    confirmPasswordError.value = '请确认密码'
    return false
  }

  if (password.value !== confirmPassword.value) {
    confirmPasswordError.value = '两次输入的密码不一致'
    return false
  }

  confirmPasswordError.value = ''
  return true
}

// 密码强度计算
const passwordStrength = computed(() => {
  const pwd = password.value
  if (!pwd) return 0

  let strength = 0
  if (pwd.length >= 8) strength++
  if (/[A-Z]/.test(pwd)) strength++
  if (/[a-z]/.test(pwd)) strength++
  if (/[0-9]/.test(pwd)) strength++
  if (/[^A-Za-z0-9]/.test(pwd)) strength++

  return strength
})

// 密码强度文本和颜色
const passwordStrengthInfo = computed(() => {
  const strength = passwordStrength.value
  if (strength === 0) return { text: '', color: '#e0e0e0' }
  if (strength <= 2) return { text: '弱', color: '#e74c3c' }
  if (strength <= 3) return { text: '中', color: '#f39c12' }
  return { text: '强', color: '#27ae60' }
})

// 安全问题验证
const validateSecurityQuestions = () => {
  if (question1Type.value === 'custom' && !customQuestion1.value.trim()) {
    ElMessage.error('请输入第一个安全问题')
    return false
  }

  if (!answer1.value.trim()) {
    ElMessage.error('请输入第一个安全问题的答案')
    return false
  }

  if (question2Type.value === 'custom' && !customQuestion2.value.trim()) {
    ElMessage.error('请输入第二个安全问题')
    return false
  }

  if (!answer2.value.trim()) {
    ElMessage.error('请输入第二个安全问题的答案')
    return false
  }

  return true
}

// 获取安全问题文本
const getQuestionText = (questionType: string, selectedIndex: number, customText: string) => {
  if (questionType === 'custom') {
    return customText.trim()
  }
  return securityQuestions[selectedIndex]
}

// 步骤验证
const validateCurrentStep = async () => {
  switch (currentStep.value) {
    case 1:
      const phoneValid = await validatePhone()
      const usernameValid = username.value.trim() !== '' && await validateUsername()
      if (!usernameValid && username.value.trim() !== '') {
        ElMessage.error('用户名已存在或格式不正确')
      }
      return phoneValid && usernameValid
    case 2:
      return validatePassword() && validateConfirmPassword()
    case 3:
      return validateSecurityQuestions()
    default:
      return false
  }
}

// 步骤导航
const nextStep = async () => {
  if (await validateCurrentStep()) {
    if (currentStep.value < totalSteps) {
      currentStep.value++
    } else {
      await handleRegister()
    }
  }
}

const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

// 注册用户
const registerUser = async (userData: any): Promise<any> => {
  try {
    const response = await fetch(`/api/users/add`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData)
    })
    const result = await response.json()
    return result
  } catch (error) {
    console.error('注册用户失败:', error)
    return null
  }
}

// 添加安全问题
const addSecurityQuestion = async (questionData: any): Promise<boolean> => {
  try {
    const response = await fetch(`/api/securityQuestions/add`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(questionData)
    })
    const result = await response.json()
    return result.code === ResponseMsg.SUCCESS
  } catch (error) {
    console.error('添加安全问题失败:', error)
    return false
  }
}

// 注册提交
const handleRegister = async () => {
  if (loading.value) return

  loading.value = true

  try {
    // 1. 注册用户
    const userData = {
      phone: phoneNumber.value.trim(),
      nickname: username.value.trim(),
      originalpwd: password.value, // 原始密码，后端会加密
      points: 0, // 初始积分
      createdAt: new Date(),
      updatedAt: new Date()
    }

    const userResult = await registerUser(userData)
    if (!userResult || userResult.code !== ResponseMsg.SUCCESS) {
      ElMessage.error(userResult?.msg || '注册失败，请稍后重试')
      return
    }

    // 2. 获取新创建的用户ID
    const userId = userResult.data // 从响应中获取用户ID

    if (!userId) {
      ElMessage.error('获取用户信息失败，请重新注册')
      return
    }

    // 3. 添加安全问题
    const questions = [
      {
        userId: userId,
        question: getQuestionText(question1Type.value, selectedQuestion1.value, customQuestion1.value),
        answer: answer1.value.trim(),
        createdAt: new Date()
      },
      {
        userId: userId,
        question: getQuestionText(question2Type.value, selectedQuestion2.value, customQuestion2.value),
        answer: answer2.value.trim(),
        createdAt: new Date()
      }
    ]

    let allQuestionsSuccess = true
    for (const question of questions) {
      const success = await addSecurityQuestion(question)
      if (!success) {
        allQuestionsSuccess = false
        break
      }
    }

    if (!allQuestionsSuccess) {
      ElMessage.warning('用户注册成功，但安全问题保存失败，请在个人中心重新设置')
    } else {
      ElMessage.success('注册成功！')
    }

    // 延迟跳转，让用户看到成功消息
    setTimeout(() => {
      router.push('/start/login')
    }, 1500)

  } catch (error) {
    console.error('注册过程出错:', error)
    ElMessage.error('注册失败，请检查网络连接后重试')
  } finally {
    loading.value = false
  }
}

// 切换密码显示状态
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value
}

// 切换问题类型
const toggleQuestionType = (questionNum: number) => {
  if (questionNum === 1) {
    question1Type.value = question1Type.value === 'preset' ? 'custom' : 'preset'
    // 重置自定义问题内容
    if (question1Type.value === 'preset') {
      customQuestion1.value = ''
    }
  } else {
    question2Type.value = question2Type.value === 'preset' ? 'custom' : 'preset'
    // 重置自定义问题内容
    if (question2Type.value === 'preset') {
      customQuestion2.value = ''
    }
  }
}

// ResponseMsg 常量定义（根据后端实际代码调整）
const ResponseMsg = {
  SUCCESS: 200,
  DATA_ERROR: 404
  // 添加其他需要的状态码
}
</script>

<template>
  <div class="register-container">
    <!-- 步骤内容 -->
    <div class="step-content">
      <div class="step-header">
        <h2>{{ stepTitles[currentStep - 1] }}</h2>
        <p class="step-description">{{ stepDescriptions[currentStep - 1] }}</p>
      </div>

      <form @submit.prevent="nextStep">
        <!-- 第一步：基本信息 -->
        <div v-if="currentStep === 1" class="step-form">
          <div class="form-group">
            <label for="phoneNumber">
              <i class="icon">📱</i> 手机号
            </label>
            <input
                id="phoneNumber"
                v-model="phoneNumber"
                type="tel"
                placeholder="请输入11位手机号"
                required
                maxlength="11"
                @blur="validatePhone"
                @input="phoneError = ''"
                :class="{ error: phoneError }"
                :disabled="loading"
            />
            <div v-if="phoneError" class="error-message">
              {{ phoneError }}
            </div>
          </div>

          <div class="form-group">
            <label for="username">
              <i class="icon">👤</i> 用户名/昵称
            </label>
            <input
                id="username"
                v-model="username"
                type="text"
                placeholder="请输入用户名或昵称(2-20位)"
                required
                maxlength="20"
                :disabled="loading"
            />
            <div class="input-hint">用户名注册后不可修改</div>
          </div>
        </div>

        <!-- 第二步：密码设置 -->
        <div v-else-if="currentStep === 2" class="step-form">
          <div class="form-group">
            <label for="password">
              <i class="icon">🔒</i> 设置密码
            </label>
            <div class="password-input-container">
              <input
                  id="password"
                  v-model="password"
                  :type="showPassword ? 'text' : 'password'"
                  placeholder="请输入8-20位密码，包含大小写字母和数字"
                  required
                  maxlength="20"
                  @blur="validatePassword"
                  @input="passwordError = ''"
                  :class="{ error: passwordError }"
                  :disabled="loading"
              />
              <button type="button" class="password-toggle" @click="togglePasswordVisibility" :disabled="loading">
                <i class="icon">{{ showPassword ? '👁️' : '👁️‍🗨️' }}</i>
              </button>
            </div>
            <div v-if="passwordError" class="error-message">
              {{ passwordError }}
            </div>

            <!-- 密码强度指示器 -->
            <div v-if="password" class="password-strength">
              <div class="strength-bar">
                <div
                    class="strength-fill"
                    :style="{
                    width: `${(passwordStrength / 5) * 100}%`,
                    backgroundColor: passwordStrengthInfo.color
                  }"
                ></div>
              </div>
              <div class="strength-text" :style="{ color: passwordStrengthInfo.color }">
                密码强度：{{ passwordStrengthInfo.text }}
              </div>
            </div>

            <!-- 密码要求提示 -->
            <div class="password-requirements">
              <p class="requirements-title">密码要求：</p>
              <ul>
                <li :class="{ satisfied: password.length >= 8 && password.length <= 20 }">
                  长度8-20个字符
                </li>
                <li :class="{ satisfied: /[A-Z]/.test(password) }">
                  至少包含1个大写字母
                </li>
                <li :class="{ satisfied: /[a-z]/.test(password) }">
                  至少包含1个小写字母
                </li>
                <li :class="{ satisfied: /[0-9]/.test(password) }">
                  至少包含1个数字
                </li>
              </ul>
            </div>
          </div>

          <div class="form-group">
            <label for="confirmPassword">
              <i class="icon">🔒</i> 确认密码
            </label>
            <div class="password-input-container">
              <input
                  id="confirmPassword"
                  v-model="confirmPassword"
                  :type="showConfirmPassword ? 'text' : 'password'"
                  placeholder="请再次输入密码"
                  required
                  maxlength="20"
                  @blur="validateConfirmPassword"
                  @input="confirmPasswordError = ''"
                  :class="{ error: confirmPasswordError }"
                  :disabled="loading"
              />
              <button type="button" class="password-toggle" @click="toggleConfirmPasswordVisibility" :disabled="loading">
                <i class="icon">{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}</i>
              </button>
            </div>
            <div v-if="confirmPasswordError" class="error-message">
              {{ confirmPasswordError }}
            </div>
          </div>
        </div>

        <!-- 第三步：安全问题 -->
        <div v-else-if="currentStep === 3" class="step-form">
          <div class="security-note">
            <i class="icon">💡</i>
            <span>请设置安全问题，用于找回密码时验证身份</span>
          </div>

          <!-- 第一个安全问题 -->
          <div class="form-group">
            <div class="question-header">
              <label for="answer1">
                <i class="icon">❓</i> 安全问题一
              </label>
              <button type="button" class="toggle-question-type" @click="toggleQuestionType(1)">
                {{ question1Type === 'preset' ? '使用自定义问题' : '使用预设问题' }}
              </button>
            </div>

            <div class="security-question">
              <!-- 预设问题 -->
              <div v-if="question1Type === 'preset'" class="preset-question">
                <select v-model="selectedQuestion1" class="question-select">
                  <option v-for="(question, index) in securityQuestions" :key="index" :value="index">
                    {{ question }}
                  </option>
                </select>
              </div>

              <!-- 自定义问题 -->
              <div v-else class="custom-question">
                <input
                    v-model="customQuestion1"
                    type="text"
                    placeholder="请输入您的安全问题"
                    maxlength="100"
                    class="custom-question-input"
                />
                <div class="input-hint">最多100个字符</div>
              </div>

              <input
                  id="answer1"
                  v-model="answer1"
                  type="text"
                  placeholder="请输入答案"
                  required
                  maxlength="50"
                  :disabled="loading"
                  class="answer-input"
              />
            </div>
          </div>

          <!-- 第二个安全问题 -->
          <div class="form-group">
            <div class="question-header">
              <label for="answer2">
                <i class="icon">❓</i> 安全问题二
              </label>
              <button type="button" class="toggle-question-type" @click="toggleQuestionType(2)">
                {{ question2Type === 'preset' ? '使用自定义问题' : '使用预设问题' }}
              </button>
            </div>

            <div class="security-question">
              <!-- 预设问题 -->
              <div v-if="question2Type === 'preset'" class="preset-question">
                <select v-model="selectedQuestion2" class="question-select">
                  <option v-for="(question, index) in securityQuestions" :key="index" :value="index">
                    {{ question }}
                  </option>
                </select>
              </div>

              <!-- 自定义问题 -->
              <div v-else class="custom-question">
                <input
                    v-model="customQuestion2"
                    type="text"
                    placeholder="请输入您的安全问题"
                    maxlength="100"
                    class="custom-question-input"
                />
                <div class="input-hint">最多100个字符</div>
              </div>

              <input
                  id="answer2"
                  v-model="answer2"
                  type="text"
                  placeholder="请输入答案"
                  required
                  maxlength="50"
                  :disabled="loading"
                  class="answer-input"
              />
            </div>
          </div>
        </div>

        <!-- 按钮组 -->
        <div class="button-group">
          <button v-if="currentStep > 1" type="button" class="prev-btn" @click="prevStep" :disabled="loading">
            <span>上一步</span>
          </button>
          <button type="submit" class="next-btn" :class="{ 'register-btn': currentStep === totalSteps }" :disabled="loading">
            <span v-if="loading">处理中...</span>
            <span v-else>{{ currentStep === totalSteps ? '注册' : '下一步' }}</span>
          </button>
        </div>
      </form>
    </div>

    <!-- 底部链接 -->
    <p class="form-footer">
      已有账号？<router-link to="/start/login" class="footer-link">立即登录</router-link>
    </p>
  </div>
</template>

<style scoped>
.register-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 步骤内容 */
.step-content {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.step-header {
  text-align: center;
  margin-bottom: 2rem;
}

.step-header h2 {
  color: #2a4b8c;
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.step-description {
  color: #666;
  margin: 0;
  font-size: 0.95rem;
}

.step-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  color: #444;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon {
  font-size: 1.1rem;
}

.input-hint {
  font-size: 0.8rem;
  color: #999;
  margin-top: 0.25rem;
}

/* 安全提示 */
.security-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #e8f4fd;
  border-radius: 8px;
  color: #2a4b8c;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* 输入框样式 */
input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
  box-sizing: border-box;
}

input:focus {
  outline: none;
  border-color: #2a4b8c;
  box-shadow: 0 0 0 3px rgba(42, 75, 140, 0.1);
  background-color: #fff;
}

input.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

.error-message {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* 密码输入容器 */
.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-container input {
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.password-toggle:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.05);
}

.password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.password-toggle .icon {
  font-size: 1rem;
}

/* 密码强度指示器 */
.password-strength {
  margin-top: 0.5rem;
}

.strength-bar {
  width: 100%;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s ease;
}

.strength-text {
  font-size: 0.8rem;
  margin-top: 0.25rem;
  text-align: right;
}

/* 密码要求提示 */
.password-requirements {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 0.8rem;
}

.requirements-title {
  margin: 0 0 0.5rem 0;
  color: #666;
  font-weight: 500;
}

.password-requirements ul {
  margin: 0;
  padding-left: 1.2rem;
  color: #999;
}

.password-requirements li {
  margin-bottom: 0.25rem;
}

.password-requirements li.satisfied {
  color: #27ae60;
  text-decoration: line-through;
}

/* 安全问题样式 */
.security-question {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-question-type {
  background: none;
  border: none;
  color: #2a4b8c;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.toggle-question-type:hover {
  background-color: rgba(42, 75, 140, 0.1);
}

.question-select {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 0.95rem;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
}

.question-select:focus {
  outline: none;
  border-color: #2a4b8c;
  box-shadow: 0 0 0 3px rgba(42, 75, 140, 0.1);
  background-color: #fff;
}

.custom-question-input {
  margin-bottom: 0.5rem;
}

.answer-input {
  margin-top: 0.5rem;
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.prev-btn, .next-btn {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prev-btn:disabled, .next-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none !important;
}

.prev-btn {
  background: #f0f0f0;
  color: #666;
}

.prev-btn:hover:not(:disabled) {
  background: #e0e0e0;
}

.next-btn {
  background: linear-gradient(to right, #2a4b8c, #3a6bc5);
  color: white;
  box-shadow: 0 4px 12px rgba(42, 75, 140, 0.3);
}

.next-btn:hover:not(:disabled) {
  background: linear-gradient(to right, #3a6bc5, #2a4b8c);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(42, 75, 140, 0.4);
}

.register-btn {
  background: linear-gradient(to right, #27ae60, #2ecc71);
}

.register-btn:hover:not(:disabled) {
  background: linear-gradient(to right, #2ecc71, #27ae60);
}

/* 底部链接 */
.form-footer {
  color: #666;
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
}

.footer-link {
  color: #2a4b8c;
  text-decoration: none;
  font-weight: 500;
}

.footer-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .register-container {
    padding: 1rem 0.5rem;
  }

  .step-content {
    padding: 1.5rem;
  }

  input {
    padding: 0.8rem 1rem;
  }

  .button-group {
    flex-direction: column;
  }

  .prev-btn, .next-btn {
    padding: 0.9rem;
  }

  .password-requirements {
    font-size: 0.75rem;
  }

  .question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .toggle-question-type {
    align-self: flex-end;
  }
}
</style>